<template>
  <el-form :model="formData" label-width="auto" style="max-width: 600px" ref="form1Ref" :rules="rules">

      <el-form-item label="名称" prop="name" label-width="80px">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="副标题" prop="name" label-width="80px">
        <el-input v-model="formData.subName" :rows="2" type="textarea" />
      </el-form-item>
      <el-form-item label="图片" prop="img" label-width="80px">
        <el-space wrap>
          <Tuku v-model="formData.img1" />
        <Tuku v-model="formData.img2" />
        <Tuku v-model="formData.img3" />
        <Tuku v-model="formData.img4" />
        <Tuku v-model="formData.img5" />
      </el-space>
        
      </el-form-item>
      <el-form-item label="分类" label-width="80px">
         
          <CategoryTree v-model="formData.categoryId" ></CategoryTree>
         
      </el-form-item>
      <el-form-item label="状态" label-width="80px"> 
        <Enum v-model="formData.status" enumName="CategoryStatus"></Enum>
      </el-form-item>
      <el-form-item label="排序" label-width="80px">
        <el-input-number :min="0" v-model="formData.seq" />
      </el-form-item>
      <el-form-item label="标签" label-width="80px">
        <el-space wrap>
                <el-tag v-for="tag in formData.tags" :key="tag" closable @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
            </el-space>


            <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" size="small"
                @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
            <el-button v-else class="button-new-tag" size="small" @click="showInput">
                + 新标签
            </el-button>
      </el-form-item>
      <el-form-item label="详情" label-width="80px">
        <Editor v-model="formData.brief" :height="200"></Editor>
      </el-form-item>
      <el-form-item label-width="80px">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import Tuku from '@/components/Tuku.vue';
import Enum from '@/components/Enum.vue';
import { onMounted, reactive, ref } from 'vue';
import { productApi } from '@/api';
import { ElMessage } from 'element-plus';
import CategoryTree from '@/components/CategoryTree.vue';
import Editor from '@/components/Editor.vue';
const form1Ref = ref()
const formData = reactive<any>({
id: 0,  
name: '',
subName: "",
img1: '',
img2: '',
img3: '',
img4: '',
img5: '',
status:0,
categoryId:0,
seq:1,
brief: '',
tags: []
})
const inputValue = ref('')
const inputVisible = ref(false)
const handleClose = (tag: string) => {
    formData.tags.splice(formData.tags.indexOf(tag), 1)
}
const handleInputConfirm = () => {
    if (inputValue.value) {
        formData.tags.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}
const showInput = () => {
    inputVisible.value = true
}

const submit = () => {
  let imgArray=[]
  for(let i=1;i<=5;i++){
    if(formData['img'+i]!=""){
      
      imgArray.push(formData['img'+i])
    }
  }
  if(imgArray.length==0){
    ElMessage.error("请上传图片")
    return
  }
  
  let params={
    name: formData.name,
    subName: formData.subName,
    img: imgArray,
    status:formData.status,
    categoryId:formData.categoryId,
    seq:formData.seq,
    brief: formData.brief,
    tags: formData.tags
  }
  productApi.add.call(params).then(()=>{
  ElMessage.success("添加成功")
  
})

}
onMounted(()=>{

})


const rules = {
   name: [
  { required: true, message: '请输入名称', trigger: 'blur' }
  ],
  
}
const submitForm = async () => {

  await form1Ref.value.validate((valid: any, fields: any) => {
      if (valid) {
          submit()
      }
  })
}
const resetForm = () => {

}
</script>
